<div class="max-w-md space-y-8">
  <div>
    <svg viewBox="0 0 20 20" fill="#ef4444" class="mx-auto h-12 w-auto">
      <path
        fill-rule="evenodd"
        d="M13.5 4.938a7 7 0 11-9.006 1.737c.202-.257.59-.218.793.039.278.352.594.672.943.954.332.269.786-.049.773-.476a5.977 5.977 0 01.572-2.759 6.026 6.026 0 012.486-2.665c.247-.14.55-.016.677.238A6.967 6.967 0 0013.5 4.938zM14 12a4 4 0 01-4 4c-1.913 0-3.52-1.398-3.91-3.182-.093-.429.44-.643.814-.413a4.043 4.043 0 001.601.564c.303.038.531-.24.51-.544a5.975 5.975 0 011.315-4.192.447.447 0 01.431-.16A4.001 4.001 0 0114 12z"
        clip-rule="evenodd"
      />
    </svg>
    <h1 class="mt-6 text-4xl text-center font-bold tracking-tight text-zinc-100 sm:text-3xl">
      Sign in to your account
    </h1>
  </div>

  <%= if @error_message do %>
    <div class="text-center text-sm text-zinc-400">
      <p><%= @error_message %></p>
    </div>
  <% end %>

  <%= form_for @conn, Routes.user_session_path(@conn, :create), [as: :user, class: "mt-8 space-y-6"], fn _f -> %>
    <input type="hidden" name="user[remember_me]" value="true" />

    <div class="rounded-md shadow-sm space-y-2">
      <div>
        <label for="email-address" class="sr-only">Email address</label>
        <input
          id="email-address"
          name="user[email]"
          type="email"
          autocomplete="email"
          required
          class="w-full flex-auto appearance-none rounded-md border px-3 py-[calc(theme(spacing.2)-1px)] shadow-md shadow-zinc-800/5 placeholder:text-zinc-400 focus:border-red-500 focus:outline-none focus:ring-4 focus:ring-red-500/10 border-zinc-700 bg-zinc-700/[0.15] text-zinc-200 placeholder:text-zinc-500 focus:border-red-400 focus:ring-red-400/10 sm:text-sm"
          placeholder="Email address"
        />
      </div>

      <div>
        <label for="password" class="sr-only">Password</label>
        <input
          id="password"
          name="user[password]"
          type="password"
          autocomplete="current-password"
          required
          class="w-full flex-auto appearance-none rounded-md border px-3 py-[calc(theme(spacing.2)-1px)] shadow-md shadow-zinc-800/5 placeholder:text-zinc-400 focus:border-red-500 focus:outline-none focus:ring-4 focus:ring-red-500/10 border-zinc-700 bg-zinc-700/[0.15] text-zinc-200 placeholder:text-zinc-500 focus:border-red-400 focus:ring-red-400/10 sm:text-sm"
          placeholder="Password"
        />
      </div>
    </div>

    <div>
      <button
        type="submit"
        class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white outline-offset-2 transition active:transition-none bg-zinc-800 font-semibold text-zinc-100 hover:bg-zinc-700 active:bg-zinc-800 active:text-zinc-100/70 bg-zinc-700 hover:bg-zinc-600 active:bg-zinc-700 active:text-zinc-100/70 flex-none"
      >
        Login
      </button>
    </div>
  <% end %>
</div>
